<template>
	<div id="update">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">身份认证</h1>
		</header>
		<div class="mui-content">
			<ul class="center">
				<li class="li-item">
					<span class="icon"><img src="../assets/images/center/my1.png"/></span>
					<span class="name">姓名</span>
					<span class="type">张小小</span>
				</li>
				<li class="li-item">
					<span class="icon"><img src="../assets/images/center/my2.png"/></span>
					<span class="name">性别</span>
					<span class="type">
						<popup-picker :data="list1" v-model="value1" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker>
					</span>
				</li>
			</ul>
			<ul class="center">
				<li class="li-item">
					<span class="icon"><img src="../assets/images/center/my4.png"/></span>
					<span class="name">证件类型</span>
					<span class="type"><popup-picker :data="list2" v-model="value2" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker></span>
				</li>
				<li class="li-item">
					<span class="icon"><img src="../assets/images/center/my3.png"/></span>
					<span class="name">证件号码</span>
					<span class="type">4****************8</span>
				</li>
			</ul>
			<div class="btn">保存</div>
		</div>
		<div class="footer">
			<div class="footer-item footer-item-active" @click="gotoPage('index')">
				<span class="mui-icon-house mui-icon-house-active"></span>
				<span class="footer-tab-label footer-tab-label-active">首页</span>
			</div>
			<div class="footer-item" @click="gotoPage('list')">
				<span class="mui-icon-discover" style="left: 40.5%;"></span>
				<span class="footer-tab-label">发现</span>
			</div>
			<!-- 	<div class="footer-item" @click="gotoPage('news')">
				<span class="mui-icon-list"></span>
				<span class="footer-tab-label">资讯</span>
			</div> -->
			<div class="footer-item" @click="gotoPage('mine')">
				<span class="mui-icon-my"></span>
				<span class="footer-tab-label">我的</span>
			</div>
		</div>
	</div>
</template>

<script>
	import { PopupPicker } from 'vux'
	import libs from "@/assets/js/libs";

	export default {
		components: {
			PopupPicker,
		},
		mounted() {},
		data() {
			return {
				value1: [],
				list1: [
					['男', '女']
				],
				value2: [],
				list2: [
					['证件照', '身份证']
				],
			};
		},
		methods: {
			gotoPage(url) {
				//判断是否登录
				this.$router.push({
					name: url
				});
			},
			onChange(val) {
				console.log('val change', val)
			},
			onShow() {
				console.log('on show')
			},
			onHide(type) {
				console.log('on hide', type)
			}
		}
	};
</script>
<style lang="scss">
	@import "../assets/css/funcs.scss";
	@import '../assets/css/common.scss';
	#update {
		background-color: #F5F5F5;
		.mui-content>.center:first-child {
			margin-top: 0px;
		}
		.center {
			background-color: #fff;
			margin-top: pxToRem(16px);
		}
		.center>.li-item:last-child {
			border: none;
		}
		.li-item {
			height: pxToRem(102px);
			line-height: pxToRem(102px);
			width: 94%;
			margin: auto;
			border-bottom: 1px solid #f5f5f5;
			background-position-y: pxToRem(34px);
		}
		.icon {
			width: pxToRem(35px);
			height: pxToRem(34px);
			display: block;
			float: left;
			position: relative;
			top: pxToRem(34px);
			img {
				width: 100%;
			}
		}
		.name {
			font-size: pxToRem(27px);
			color: #010101;
			margin-left: pxToRem(16px);
		}
		.type {
			height: pxToRem(35px);
			line-height: pxToRem(35px);
			color: #999999;
			font-size: pxToRem(25px);
			padding: pxToRem(2px) pxToRem(8px);
			border-radius: pxToRem(4px);
			float: right;
			position: relative;
			top: pxToRem(34px);
		}
		.btn {
			width: 92%;
			height: 45px;
			line-height: 45px;
			background: rgba(254, 150, 1, 1);
			border-radius: 4px;
			text-align: center;
			margin: auto;
			color: #FFFFFF;
			font-size: pxToRem(33px);
			margin-top: 28px;
		}
	}
</style>
